<template>
  <div>
    <div>
      <el-input v-model="title.name"
                placeholder="添加职称等级..."
                prefix-icon="el-icon-plus"
                size="small"
                style="width: 300px"></el-input>
      <el-select size="small" v-model="title.titleLevel" placeholder="职称等级" style="margin-left: 8px;margin-right: 8px">
        <el-option
            v-for="item in titleLevels"
            :key="item"
            :label="item"
            :value="item">
        </el-option>
      </el-select>
      <el-button size="small" icon="el-icon-plus" type="primary" @click="addJobLevel">添加</el-button>
    </div>
    <div style="margin-top: 10px">
      <el-table
          :data="titles"
          stripe
          border
          size="small"
          style="width: 90%"
          @selection-change="handleSelectionChange">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            prop="id"
            label="编号"
            width="55">
        </el-table-column>
        <el-table-column
            prop="name"
            label="职称"
            width="150">
        </el-table-column>
        <el-table-column
            prop="titleLevel"
            label="职称等级"
            width="150">
        </el-table-column>
        <el-table-column
            prop="createDate"
            label="创建时间"
            width="150">
        </el-table-column>
        <el-table-column
            prop="enabled"
            label="是否启用"
            width="100">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.enabled">已启用</el-tag>
            <el-tag type="danger" v-else>未启用</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            width="180"
            label="操作">
          <template slot-scope="scope">
            <el-button size="small" type="primary" @click="showEditView(scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="deleteHandler(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button size="small" type="danger"
                 :disabled="this.multipleSelection.length===0"
                 @click="deleteMany"
      >批量删除</el-button>
    </div>
    <el-dialog
        title="编辑职称"
        :visible.sync="dialogVisible"
        width="30%"
        >
      <table>
        <tr>
          <td>
            <el-tag>职称名称</el-tag>
          </td>
          <td>
            <el-input v-model="updateTitles.name" style="margin-left: 6px" size="small" placeholder="请输入职称"></el-input>
          </td>
        </tr>
        <tr>
          <td>
            <el-tag>职称等级</el-tag>
          </td>
          <td>
            <el-select size="small" v-model="updateTitles.titleLevel" placeholder="职称等级" style="margin-left: 8px;margin-right: 8px">
              <el-option
                  v-for="item in titleLevels"
                  :key="item"
                  :label="item"
                  :value="item">
              </el-option>
            </el-select>
          </td>
        </tr>
        <tr>
          <td>
            <el-tag>是否启用</el-tag>
          </td>
          <td>
            <el-switch
                style="display: block"
                v-model="updateTitles.enabled"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-text="已启用"
                inactive-text="未启用">
            </el-switch>
          </td>
        </tr>
      </table>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="doUpdate">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "JobLevelMana",
  data(){
    return {
      title:{
        name:"",
        titleLevel:""
      },
      titleLevels:[
          "正高级",
          "副高级",
          "中级",
          "初级",
          "员级"
      ],
      updateTitles:{
        name:"",
        titleLevel: "",
        enabled:false
      },
      titles:[],
      dialogVisible:false,
      multipleSelection:[]
    }
  },
  mounted() {
    //初始化职称查询列表
    this.initTitles();
  },
  methods:{
    //批量删除
    deleteMany(){
      this.$confirm('此操作将永久删除['+this.multipleSelection.length+']个职称, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let ids = "?";
        this.multipleSelection.forEach(item=>{
          ids+= "ids=" + item.id + "&";
        });
        ids = ids.substring(0,ids.length-1);
        this.$deleteRequest("/system/basic/joblevel/"+ids).then(resp=>{
          if(resp){
            this.initTitles();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //多选
    handleSelectionChange(val){
        this.multipleSelection = val;
    },
    //更新
    doUpdate(){
      this.$putRequest("/system/basic/joblevel/",this.updateTitles).then(resp=>{
        if(resp){
          this.initTitles();
          this.dialogVisible = false;
        }
      })
    },
    //显示编辑窗口
    showEditView(data){
      Object.assign(this.updateTitles,data)
      this.updateTitles.createDate = "";
      this.dialogVisible = true;
    },
    //删除
    deleteHandler(data){
      this.$confirm('此操作将永久删除['+data.name+']职称, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$deleteRequest("/system/basic/joblevel/"+data.id).then(resp=>{
          if(resp){
            this.initTitles();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //添加
    addJobLevel(){
      if(this.title.name && this.title.titleLevel){
          this.$postRequest("/system/basic/joblevel/",this.title).then(resp=>{
            if(resp){
              this.initTitles();
            }
          })
      }else {
        this.$message.error("字段不能为空！")
      }
    },
    //初始化
      initTitles(){
        this.$getRequest("/system/basic/joblevel/").then(resp=>{
          if(resp){
            //alert(JSON.stringify(resp))
            this.titles = resp;
            this.title.name = "";
            this.title.titleLevel = "";
          }
        })
      }
  }
}
</script>

<style scoped>

</style>